<template>
  <div style="margin-top: 50px">
    <el-form ref="activityAttrForm" :model="value" :rules="rules" label-width="120px" style="width: 720px" size="small">
      <el-form-item label="推广时间" prop="promotionDate">
        <el-date-picker
          v-model="value.promotionDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="跳转链接" prop="purchUrl">
        <el-input v-model="value.purchUrl" clearable>
          <template slot="prepend">https://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="value.activityStatus" active-text="禁用" active-color="#ff4949" inactive-text="启用" inactive-color="#13ce66" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="value.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="活动图" prop="activityImgUrl">
        <single-upload v-model="value.activityImgUrl" style="width: 300px;display: inline-block;margin-left: 10px" />
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写活动信息</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit('activityAttrForm')">完成，提交活动</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SingleUpload from '@/components/Future/UploadImage/singleUpload'

export default {
  name: 'ActivityAttrDetail',
  components: { SingleUpload },
  props: {
    value: Object,
    isEdit: { type: Boolean, default: false }
  },
  data() {
    return {
      // 编辑模式时是否初始化成功
      hasEditCreated: false,
      rules: {
        promotionDate: [
          { required: true, message: '请选择推广时间', trigger: 'blur' }
        ],
        purchUrl: [
          { required: true, message: '请输入代购链接', trigger: 'blur' }
        ],
        activityImgUrl: [
          { required: true, message: '请活动图', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 商品的编号
    productId() {
      return this.value.id
    }
  },
  watch: {
    productId: function(newValue) {
      if (!this.isEdit) return
      if (this.hasEditCreated) return
      if (newValue === undefined || newValue == null || newValue === 0) return
      this.handleEditCreated()
    }
  },
  created() {

  },
  methods: {
    handleEditCreated() {
      this.hasEditCreated = true
    },

    handlePrev() {
      this.$emit('prevStep')
    },
    handleFinishCommit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('finishCommit', this.isEdit)
        } else {
          this.$message({ message: '验证失败', type: 'error', duration: 1000 })
          return false
        }
      })
    }

  }
}
</script>

<style scoped>
  .littleMarginLeft {
    margin-left: 10px;
  }

  .littleMarginTop {
    margin-top: 10px;
  }

  .paramInput {
    width: 250px;
  }

  .paramInputLabel {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px
  }

  .cardBg {
    background: #F8F9FC;
  }
</style>
